<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <script src="/layui/jquery-3.5.1.min.js"></script>
    <script src="/layui/layui.js" charset="utf-8"></script>
    <script th:inline="javascript">
        //日期和员工id
        var sid =[[${param.sid}]];
        sid =parseInt(sid);
        var id = [[${session.user.id}]];
        id =parseInt(id);

        var date =[[${param.date}]];
        $(function () {
                $("#date").val(date.toString())
        })
    </script>
</head>
<body>

<div class="demoTable">
    <form class="layui-form" action="">

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <select name="enable"  id="demoReload" lay-verify="required" lay-search="">
                        <option value="">全部</option>
                        <option value="0">未开始</option>
                        <option value="1">进行中</option>
                        <option value="2">已逾期</option>
                        <option value="3">已完成</option>
                        <option value="4">已删除</option>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">日期</label>
                <div class="layui-input-inline">
                    <input  type="text" name="date" id="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
    </form>
    <div style="float: left;margin-left:700px;margin-top: -60px;">
        <button class="layui-btn" data-type="reload" >搜索</button>
        <button type="button" class="layui-btn layui-btn-normal" id="back"  >返回计划页</button>
    </div>
</div>

<table class="layui-hide" id="test" lay-filter="test"></table>


<script type="text/html" id="barDemo">
    {{#  if(d.enable == 4){ }}
    <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="delreason">删除详情</button>
    {{#  } }}
    {{#  if(d.enable == 3  && id!=sid){ }}
    <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="find">查看详情</button>
    {{#  } }}
    {{#  if(d.enable == 3  && id==sid){ }}
    <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="find">查看详情</button>
    {{#  } }}

    {{#  if(d.enable == 2 && d.assignedById != 0  && id==sid){ }}
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="com">完成</a>
    {{#  } }}
    {{#  if(d.enable == 1 && d.assignedById != 0  && id==sid){ }}
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="com">完成</a>
    {{#  } }}

    {{#  if(d.enable == 2&& d.assignedById == 0  && id==sid){ }}
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="com">完成</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    {{#  } }}
    {{#  if(d.enable == 1&& d.assignedById == 0  && id==sid){ }}
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="com">完成</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    {{#  } }}

    {{#  if(d.enable == 0&& d.assignedById == 0  && id==sid){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    {{#  } }}
</script>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
    layui.use(['table','jquery', 'laydate'], function(){
        var table = layui.table;
        var $ =layui.jquery;
        var laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });

        //重载方法
        var active = {
            reload: function(){
                var demoReload = $('#demoReload');
                var calendar = $('#date').val();

                //执行重载

                    date=calendar;

                var value =demoReload.val();

                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        interest: value,
                        date:date
                    }
                }, 'data');
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


        table.render({
            elem: '#test'
            ,url:'/dailyplan/getDayPlan'
            ,title: '用户工作表'
            ,totalRow: true
            ,where: {
                      sid:sid,
                     date:date.toString()
            }
            ,cols: [
                [
                    {field:'title', title:'工作名称',  fixed: 'left', unresize: true,  totalRowText: '合计'}
                    ,{field:'work', title:'工作内容'}
                    ,{field:'priority', title:'优先级', sort: true}
                    ,{field:'startTime', title:'开始时间'}
                    ,{field:'endTime', title:'结束时间'}
                    ,{field:'id', title:'ID'}
                    ,{field:'model', title:'状态'}

                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
                ]
            ]
            ,id: 'testReload'
            , page: true
        });


        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            var id= data.id;

            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    layer.prompt({
                        formType: 2,
                        title: '请输入原因',
                        area: ['300px', '100px'] //自定义文本域宽高
                    }, function(value, index, elem){
                        $.ajax({
                            url: "/dailyplan/delplan",
                            data: {id:id,value:value},
                            success: function () {
                                obj.del();
                                layer.close(index);
                            }
                        })
                        layer.close(index);
                    });

                   /* $.ajax({
                        url: "/dailyplan/delplan",
                        data: {id:id},
                        success: function () {
                            obj.del();
                            layer.close(index);
                        }
                    })*/

                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.prompt({
                    formType: 2
                    ,value: data.work
                }, function(value, index){
                    $.ajax({
                        url: "/dailyplan/changeplan",
                        data: {id:id,work:value},
                        success: function () {
                            obj.update({
                                work: value
                            });
                            layer.close(index);
                        }
                    })
                    layer.close(index);
                });
            } else if(obj.event === 'com'){
                layer.confirm('确认完成', function(index){
                    layer.open({
                        type: 2,
                        area: ['500px', '300px'],
                        content: '/dailyplan/completePlan?id='+id,
                        end: function () {
                            window.location.reload();
                        }
                    });
                    layer.close(index);

                    /*$.ajax({
                        url: "/dailyplan/comleteplan",
                        data: {id:id},
                        success: function () {
                           // location.href="/dailyplan/dayPlan?date="+date;
                        }
                    })*/
                });
            }else if(obj.event === 'find'){
                layer.open({
                    type: 2,
                    area: ['600px','400px'],
                    content: '/dailyplan/planPictures?id='+id,
                    btn: ['关闭'],
                     yes: function () {
                        layer.closeAll();
                      },
                    zIndex: layer.zIndex
            });

            }else if(obj.event === 'delreason'){
                layer.open({
                    type: 2,
                    area: ['600px','400px'],
                    content: '/dailyplan/delReason?id='+id,
                    btn: ['关闭'],
                    yes: function () {
                        layer.closeAll();
                    },
                    zIndex: layer.zIndex
                });

            }
        });
        //返回
        $(function () {
            $("#back").click(function () {
                location.href="/dailyplan/calendar";
            })
        })
    });



</script>
</body>
</html>